<!-- 展示用户消息的缩略item -->
<template>
	<view class="user-message__item flex" @click="onClickToDetail">
		
		<image	:src="data.image" mode="aspectFill" class="user-message__item-avatar"></image>
		<view class="user-message__item-info flex-column">
			<text>{{ data.name }}</text>
			<text class="user-message__item-desc">{{ data.mes }}</text>
		</view>
		
		
	</view>
	
	<slot></slot>
</template>

<script setup>
const props = defineProps({
	data: {
		type: Object,
		default: () => ({})
	}
})
	function onClickToDetail(){
		// console.log('点击消息详情');
		let id=1,messageName = props.data.name
		uni.navigateTo({
			url:`/pages/user/userMessage/userMessageDetails/userMessageDetails?id=${id}&messageName=${messageName}`
		})
	}
</script>

<style lang="scss" scoped>
.user-message__item{
	width: 690rpx;
	height: 116rpx;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 30rpx;
	// border-bottom: 4rpx solid #d7d7d7;
	&-avatar{
		width: 60rpx;
		height: 60rpx;
		margin-right: 23rpx;
		border-radius: 50%;
	}
	
	&-info{
		font-size: 28rpx;
		color: #333333;
	}
	
	&-desc{
		display: inline-block;
		width: 536rpx;
		overflow-x: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 24rpx;
		color: #797979;
		margin-top: 8rpx;
	}
}
</style>
